<template>
  <div class="joininbox flex-center">
    <div class="joinone">
      <div class="flex-center" style="margin-bottom: 40px;">
        <img src="../assets/liucheng.png" class="liuchengimg" alt="" />
        <p style="font-size: 30px;">入驻流程</p>
      </div>
      <div class="bevlogerbox flex-between">
        <div class="bevloger_item">
          <img src="../assets/women.jpg" class="womenimg" alt="" />
          <p style="font-size: 18px;">成为博主</p>
          <p style="font-size: 14px; width: 200px; margin-top: 10px;">多样化品牌合作邀请，时间灵活，一份自由收入</p>
        </div>
        <el-steps direction="vertical" :active="1">
          <el-step title="注册心动点评账号" description="使用手机注册CouponCrush 账号"></el-step>
          <el-step title="联系官方升级博主">
            <div slot='description'>
              详情请添加小客服进行资质申请
              <div class="flex-a-c pointer">
                <p style="color: #1890FF;">clarawang@couponcrushltd.com</p>
                <img src="../assets/copyg.png" style="width: 14px; height: 14px; margin-left: 10px;" alt="" />
              </div>
            </div>
          </el-step>
          <el-step title="入驻成功" description="这是一段很长很长很长的描述性文字"></el-step>
        </el-steps>
      </div>
    </div>

    <div class="advantage ">
      <p class="flex-center" style="font-size: 30px;">入驻优势</p>
      <p class="flex-center" style="color: rgba(0, 0, 0, .45); font-size: 20px;margin-top: 10px;">一切变得简单明了</p>
      <div style="margin-top: 40px;" class="flex-around" >
        <div class="flex-center column" >
          <img src="../assets/ball.jpg" class="ballimg" alt="" />
          <p style="margin: 30px 0;" >商业变现</p>
          <p style="font-size: 16px; color: rgba(0, 0, 0, .45); width: 300px;" >
            通过在优质笔记挂链接获取收益，笔记合作内容，好物推荐等多个渠道
          </p>
        </div>
        <div class="flex-center column" >
          <img src="../assets/ball.jpg" class="ballimg" alt="" />
          <p style="margin: 30px 0;" >深度合作</p>
          <p style="font-size: 16px; color: rgba(0, 0, 0, .45); width: 300px;" >
           及时了解平台新动向与活动，海量商家，品牌合作
          </p>
        </div>
      </div>
    </div>


  </div>
</template>

<script>
  export default {
    name: 'Nuxtjoinin',
    data() {
      return {

      }
    }
  }
</script>

<style>
  .joininbox {
    background-color: #FDF2F0;
    width: 100%;
    flex-direction: column;
  }

  .joinone {
    margin: 40px 0;
    background-color: #fff;
    width: 1437px;
    padding: 60px 0px 80px 0px;
    box-sizing: border-box;
  }

  .liuchengimg {
    width: 24px;
    height: 24px;
  }

  .bevlogerbox {
    margin: 0 auto;
    width: 842px;
    height: 324px;
  }

  .bevloger_item {
    background: url('../assets/joininbg.jpg');
    background-size: cover;
    width: 266px;
    height: 266px;
    position: relative;
    padding: 21px 28px;
    color: #fff;

    .womenimg {
      width: 104px;
      height: 183px;
      position: absolute;
      bottom: 0;
      right: 20px;
    }
  }

  .advantage {
    margin: 40px 0;
    background-color: #fff;
    width: 1440px;
    padding: 100px 0px;
    box-sizing: border-box;
  }
  .ballimg{
    width: 75px;
    height: 75px;
  }
</style>
